<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="common/common_head :: commonHeader('采购订单变更')" />
    <link th:href="@{/static/css/plugins/cropper/cropper.min.css}" rel="stylesheet" />
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<form class="form-horizontal">
	<div class="row">
	    <div class="form-group">
	        <div class="col-sm-8" style="margin-left: 16px">
	       <input class="btn btn-primary" type="button" onclick="save()" value="保存">
	       <button class="btn btn-primary" type="button" onclick="Dialog.closeFrame(window.name)">取 消</button>
	    </div>
	</div>
	
	<!-- 显示 隐藏测试 -->
	<ul id="myTab" class="nav nav-tabs">
		<li class="active">
			<a href="#headerInfo" linkTab="headerInfo" isActive="true" data-toggle="tab"> 订单头信息</a>
		</li>
		<li>
			<a href="#itemInfo" linkTab="itemInfo" data-toggle="tab"> 行项目信息</a>
		</li>
	</ul>
	
	<!-- 订单抬头信息 -->
	<div id="headerInfo">
	<div class="ibox float-e-margins" style="padding-top: 20px">
			<div class="form-group">
			    <input type="hidden" id="poId" th:value="${header.poId}" />
			    <label class="col-xs-1 control-label">订单凭证号：</label>
			    <div class="col-xs-3">
			    	<input type="text" name="poNo" th:value="${header.poNo}" class="form-control" readonly="readonly" />
			    </div>
			    <label class="col-xs-1 control-label">订单类型：</label>
			    <div class="col-xs-3">
			    	<input type="text" name="poType" th:value="${header.poType}" class="form-control" sysDict="CGDDLX" readonly="readonly" />
			    </div>
			    <label class="col-xs-1 control-label">采购组织</label>
			    <div class="col-xs-3">
			    	<input type="text" name="purchOrg" th:value="${header.purchOrg}" class="form-control" sysDict="CGZZ" readonly="readonly" />
			    </div>
			</div>
			<div class="form-group">
			    <label class="col-sm-1 control-label">采购组：</label>
			    <div class="col-sm-3">
			        <input type="text" name="purchGroup" th:value="${header.purchGroup}" class="form-control" sysDict="CGZ" readonly="readonly" />
			    </div>
			    <label class="col-sm-1 control-label">付款条件：</label>
			    <div class="col-sm-3">
			        <input type="text" name="payCondition" th:value="${header.payCondition}" class="form-control" sysDict="FKTJ" readonly="readonly" />
			    </div>
			    <label class="col-sm-1 control-label">货币：</label>
			    <div class="col-sm-3">
			        <input type="text" name="payCondition" th:value="${header.currencyCode}" class="form-control" sysDict="BZ" readonly="readonly" />
			    </div>
			</div>
			<div class="form-group">
			    <label class="col-sm-1 control-label">供应商：</label>
			    <div class="col-sm-3">
			    	<input type="hidden" name="vendorId" id="vendorId" th:value="${header.vendorId}" />
			        <input type="text" name="vendorName" id="vendorName" class="form-control" data-toggle='modal' data-target='#myModalVendor' />
			    </div>
			    <label class="col-sm-1 control-label">创建人：</label>
			    <div class="col-sm-3">
			        <input type="text" name="createdBy" class="form-control" th:value="${header.createdBy}" readonly="readonly" />
			    </div>
			    <label class="col-sm-1 control-label">创建日期：</label>
			    <div class="col-sm-3">
			        <input type="text" name="creationDate" class="form-control" th:value="${#dates.format(header.creationDate, 'yyyy-MM-dd')}" readonly="readonly" />
			    </div>
			</div>
	</div>
	</div>
	
	<!-- 行项目信息 -->
	<div id="itemInfo" style="display:none;">
	<div class="ibox float-e-margins">
	<div class="table-responsive">
		<table class="table table-bordered text-nowrap" id="itemsTable">
			<thead>
			<tr>
				<th>订单号</th>
				<th>行项目号</th>
				<th>工厂</th>
				<th>库存地点</th>
				<th>需求者</th>
				<th>含税单价</th>
				<th>最小起订量</th>
				<th>数量</th>
				<th>计量单位</th>
				<th>税码</th>
				<th>交期</th>
				<th>备注</th>
			</tr>
			</thead>
			<tbody>
				<tr th:each="item : ${items}" th:id-val="${item.poItemId}">
				<td width='110px'><input style='width:95%' name="poNo" type="text" th:value="${header.poNo}" readonly="readonly" /></td>
				<td width='110px'><input style='width:95%' name='itemNo' th:value="${item.itemNo}" readonly="readonly" /></td>
				<td width='110px'><input style='width:95%' name='factory' th:value="${item.factory}" sysDict="GC" readonly="readonly" /></td>
				<td width='110px'><input style='width:95%' type='text' name='storageLocation' th:value="${item.storageLocation}" sysDict="KCDD" readonly="readonly" /></td>
				<td width='110px'><input style='width:95%' type='text' name='requester' th:value="${item.requester}" readonly="readonly" /></td>
				<td width='110px'><input style='width:95%' type='text' name='poPrice' th:value="${item.poPrice}" readonly/></td>
				<td width='110px'><input style='width:95%' type='text' name='priceUnit' th:value="${item.priceUnit}" readonly="readonly" /></td>
				<td width='110px'><input style='width:95%' type='text' name='poCount' th:value="${item.poCount}" /></td>
				<td width='110px'><input style='width:95%' type='text' name='poUnit' th:value="${item.poUnit}" readonly="readonly" /></td>
				<td width='110px'><input style='width:95%' type='text' name='taxCode' th:value="${item.taxCode}" sysDict="SDM" readonly="readonly" /></td>
				<td width='110px'><input style='width:95%' type='text' name='deliveryDate' th:value="${#dates.format(item.deliveryDate, 'yyyy-MM-dd')}" /></td>
				<td width='110px'><input style='width:95%' type='text' name='remark' th:value="${item.remark}" readonly="readonly" /></td>
				<td width='110px'></td>
				</tr>
			</tbody>
		</table>
	</div>
	</div>
	</div>
</div>	
</form>
</div>

<!-- Modal Vendor -->
<div class="modal fade" id="myModalVendor" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document" style="width:70%">
    <div class="modal-content" style="height:700px">
    <form id="vendorForm" th:action="@{/vendor/findSimplePage}" class="form-inline">
      <div class="modal-header" style="height:10%">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">供应商选择</h4>
      </div>
      <div class="modal-body">
		<div style="height: 30px">
	        <ul>
	           <li class="col-sm-3" style="width: 33%">
	            <label>供应商编码：</label>
	            <input name=sapCode type="text" id="sapCode" class="form-control" placeholder="供应商编码">
	           </li>
	           <li class="col-sm-3" style="width: 33%">
	            <label>供应商名称：</label>
	            <input name="vendorName" type="text" class="form-control" placeholder="供应商名称">
	           </li>
	           <li class="col-sm-3" style="width: 33%">
	            <button id="vendorSearchBtn" type="button" class="btn btn-primary btn-rounded btn-sm"><i class="fa fa-search"></i>&nbsp;搜索</button>
	            <button class="btn btn-warning btn-rounded btn-sm" type="reset"><i class="fa fa-eraser"></i>&nbsp;重置</button>
	           </li>
	        </ul>
		</div>
		<table id="vendor" class="table table-bordered"></table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" onclick="checkVendor()">确定</button>
      </div>
      </form>
      
    </div>
  </div>
</div>

<!--引入公共js-->
<div th:include="common/onload_js :: onloadJS"></div>
<!-- Chosen -->
<script th:src="@{/static/js/plugins/chosen/chosen.jquery.js}"></script>
<script type="text/javascript">
	$(function () {
		initTabBar("myTab");//初始化Tab页
		parseInputDictValToText();//转化数据字典值
		initVendorData();
		loadVendorList();
		//同时绑定多个时间日期框
		  lay("input[name='deliveryDate']").each(function(){
		    laydate.render({
		      elem: this,
		      trigger: 'click'
		    });
		  });
	});
	
	//供应商模态框选中确认
	function checkVendor(){
	    var rows = $("#vendor").bootstrapTable('getSelections');
		//判断是否选中行
		if (!rows || rows.length == 0) {
		   Dialog.alert("请先选中一行！");
		   return;
		}
		var row = rows[0];
		$("#vendorId").val(row["sapCode"]);
		$("#vendorName").val(row["vendorName"]);
		$('#myModalVendor').modal('hide');
	}
	
	//模态框隐藏时，清除所有选中项
	$('#myModalVendor').on('hidden.bs.modal', function () {
		$("#vendor").bootstrapTable('uncheckAll');
	});
	
	//初始化供应商文本框
	function initVendorData() {
		var vendorCode = $("#vendorId").val();
		Page.ajaxGET(ctxPath + "/vendor/findById/"+vendorCode, {}, function(o) {
			$("#vendorName").val(o.result.vendorName);
		}, {
			async : false
		});
	}
    
	//加载供应商列表
	function loadVendorList() {
		Searcher.createBS('#vendor',
        [
           {radio: true},
           {title: "供应商编码", field:"sapCode"},
           {title: "供应商名称", field:"vendorName"},
           {title: "付款条件",field:"payCondition"}
        ], {pageList: [10], pageSize : 10, showColumns: false, showRefresh: false}
		);
	}
    
	/**
	** 保存
	*/
   function save() {
		var poId = $("#poId").val();//header表的id
		var vendorId = $("#vendorId").val();//header表的供应商id
		var trs = $("#itemsTable tbody").find("tr");
		var data = {};
		data["poId"] = poId;
		data["vendorId"] = vendorId;
		var items = [];
		for(var i =0; i < trs.length; i++) {
			var item = {};
			var tr = $(trs[i]);
			var poItemId = tr.attr("id-val");//行项目的id
			var poPrice = tr.find("input[name='poPrice']").val();//价格
			var poCount = tr.find("input[name='poCount']").val();//数量
			var deliveryDate = tr.find("input[name='deliveryDate']").val();//交期
			item["poItemId"] = poItemId;
			item["poPrice"] = poPrice;
			item["poCount"] = poCount;
			item["deliveryDate"] = deliveryDate;
			items.push(item);
		}
		data["items"] = items;
		Page.ajaxPOST(ctxPath + "/orderHead/edit", JSON.stringify(data), function(o) {
			Dialog.msg("订单编辑成功！总共更改了" + o.result + "处数据");
			parent.refresh();
			Dialog.closeFrame(window.name);

		}, {"loadingMsg" : "正在往服务器提交数据……", contentType: 'application/json;charsetset=utf-8'});
   }
</script>

</body>
</html>